<script setup>
import { ref } from "vue";

const tabList = ref(["全部", "未读", "已读"]);
let tabIndex = ref(0);
let noticePopup = ref(false);

const handleTab = (index) => {
	tabIndex.value = index;
}

const handleShowPopup = () => {
	noticePopup.value = true;
}

</script>

<template>
	<view class="message_page">
		<view class="tab_list">
			<view class="tab_item" :class="{ 'active': tabIndex === index }" v-for="(item, index) in tabList" :key="index" @click="handleTab(index)">{{ item }}</view>
		</view>
		<view class="message_list">
		  <view class="message_item" v-for="item in 10" :key="item" @click="handleShowPopup">
		    <view class="avatar">
		      <image src="/static/image/message/icon_notice.png" mode="aspectFill"/>
		      <text>46</text>
		    </view>
		    <view class="message_content">
		      <view class="user">
						<text>系统公告</text>
						<text>2020-06-22 15:23</text>
					</view>
		      <view class="message">商家脱离平台交易违规处罚规则公告</view>
		    </view>
		  </view>
		</view>
		
		<u-popup :show="noticePopup" mode="center" :round="16">
			<view class="notice_popup">
				<view class="title">系统公告</view>
				<image src="/static/image/message/icon_close.png" mode="aspectFill" @click="noticePopup = false" />
				<view class="sub_title">商城系统更新通知</view>
				<view class="time">2024-06-26 09:30:18</view>
				<view class="content">此处填写具体内容此处填写具体内容此处填写具体内容，此处填写具体内容此处填写具体内容此处填写具体内容，此处填写具体内容此处填写具体内容此处填写具体内容。</view>
			</view>
		</u-popup>
	</view>
</template>

<style lang="scss">
	.message_page {
		box-sizing: border-box;
		padding-top: 80rpx;
		.tab_list {
			position: fixed;
			z-index: 99;
			top: 0;
			font-size: 30rpx;
			color: #999999;
			background: #fff;
			display: flex;
			justify-content: space-between;
			width: 750rpx;
			box-sizing: border-box;
			padding: 14rpx 80rpx;
			.tab_item {
				&:after {
				  content: "";
				  position: absolute;
				  bottom: 0;
				  width: 48rpx;
				  height: 6rpx;
				  margin-left: -50rpx;
				  background: #FF4638;
				  border-radius: 4rpx;
				  display: none;
				}
				&.active {
				  color: #FF4638;
				  &:after {
				    display: inline-block;
				  }
				}
			}
		}
		.message_list {
			width: 750rpx;
			padding: 0 40rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			.message_item {
				padding: 32rpx 0;
				display: flex;
				align-items: center;
				&:not(:nth-of-type(1)) {
					border-bottom: 1px solid #eceff2;
				}
				&:last-child {
					border-bottom: unset;
				}
				.avatar{
				  position: relative;
				  width: 96rpx;
				  height: 96rpx;
				  margin-right: 24rpx;
				  image {
				    width: 96rpx;
				    height: 96rpx;
				    border-radius: 50%;
				  }
				  text {
				    position: absolute;
				    right: -10rpx;
						top: -10rpx;
				    background: #FF6619;
				    border-radius: 32rpx;
				    border: 2rpx solid #FFFFFF;
				    color: #fff;
						font-size: 24rpx;
				    padding: 4rpx 8rpx;
				    min-width: 20rpx;
				    text-align: center;
				  }
				}
				.message_content {
					flex: 1;
					.user {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 12rpx;
						text {
							&:nth-of-type(1) {
								font-size: 32rpx;
								color: #3B3D3D;
								font-weight: bold;
							}
							&:nth-of-type(2) {
								font-size: 24rpx;
								color: #989898;
							}
						}
					}
					.message {
						font-size: 24rpx;
						color: #969699;
						line-height: 32rpx;
					}
				}
			}
		}
		.notice_popup {
			position: relative;
			width: 560rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 0 42rpx 52rpx;
			.title {
				font-weight: 500;
				font-size: 36rpx;
				line-height: 42rpx;
				color: #353535;
				letter-spacing: 1px;
				text-align: center;
				padding-top: 40rpx;
			}
			image {
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				width: 48rpx;
				height: 48rpx;
			}
			.sub_title {
				font-weight: 500;
				font-size: 28rpx;
				line-height: 33rpx;
				letter-spacing: 1px;
				color: #353535;
				margin: 24rpx 0 4rpx;
			}
			.time {
				font-size: 24rpx;
				line-height: 36rpx;
				color: #989898;
			}
			.content {
				font-size: 24rpx;
				line-height: 28rpx;
				letter-spacing: 1px;
				color: #353535;
				margin-top: 28rpx;
			}
		}
	}
</style>